<template>
  <div class="home">
    <app-header></app-header>
    <div class="home_ct" @scroll="scroll" ref="scrollCount">
      <app-tab></app-tab>
      <app-list :list="showList"></app-list>
      <i v-show="show" class="iconfont icon-huidaodingbu" @click="goTop"></i>
    </div>
  </div>
</template>

<script>
import AppHeader from "../components/appHeader.vue";
import AppList from "../components/appList.vue";
import AppTab from "../components/appTab.vue";
// @ is an alias to /src
import axios from "axios";
import { ref, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
export default {
  name: "Home",
  components: {
    AppHeader,
    AppTab,
    AppList,
  },
  setup(props) {
    const store = useStore();
    const data = reactive({
      allList: [],
      showList: [],
      show: false
    });
    const scrollCount = ref(null);
    axios.get("https://cnodejs.org/api/v1/topics").then((res) => {
      data.allList = res.data.data;
      data.showList = res.data.data;
    });

    watch(
      () => store.state.itemName,
      (newVal) => {
        // console.log(newVal);
        let obj = {
          问答: 'ask',
          分享: 'share',
          招聘: 'job',
          精华: 'good',
        };
        if (newVal == "全部") {
          data.showList = data.allList;
        } else {
          data.showList = data.allList.filter(
            (item) => item.tab == obj[newVal]
          );
        }
      }
    );
    // let dom = null;
    const scroll = (e) => {
      //  console.log(e.target);
      //  dom = e.target;
       if (e.target.scrollTop>400){
         data.show = true
       } else {
         data.show = false
       }
    }
    const goTop = () => {
      // console.log(scrollCount.value);
    //  this.$refs.scrollCount
     let num = scrollCount.value.scrollTop;
     let time = setInterval(() => {
        if (num <= 0){
          clearInterval(time);
          return;
        }
        num=num-50;
        scrollCount.value.scrollTop = num;
      },1);
    }
    return {
      ...toRefs(data),
      scroll,
      goTop,
      scrollCount
    };
  },
};
</script>
<style lang="scss" scoped>
.home_ct {
  height: calc(100vh - 50px);
  overflow-y: auto;
}
.icon-huidaodingbu{
  position: fixed;
  bottom: 200px;
  right: 30px;
  font-size: 40px;
  color: red;
}
</style>
